<template>
  <div class="index" @scroll="handleFullScroll()">
    <div>
      <el-carousel indicator-position="none" arrow="hover" height="800px">
        <el-carousel-item v-for="banner in bannerList" :key="banner">
          <div>
            <img
              style="width: 100%; height: 800px"
              :src="banner.article_cover"
              alt="Element logo"
            />
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="content px-32">
      <div class="pt-4 pb-8">
        <div class="mb-8">
          <div class="nav">
            <div
              class="fadeInUp animated"
              v-for="(battery, index) in batteryList"
              :key="battery"
              @click="changeIndex(index)"
              :style="{
                backgroundColor: batteryIndex == index ? '#15397b' : '',
              }"
            >
              <div>
                <img
                  :src="battery.article_label"
                  style="width: 100%; height: 100%"
                />
              </div>
              <div>{{ battery[fieldA] }}</div>
            </div>
          </div>
          <div class="goods">
            <div class="n-left fadeInUp animated">
              <div
                class="n-left-mask flex justify-start items-end fadeInUp animated"
                style="animation-delay: 0.2s"
              >
                <div
                  class="w-4/12 flex flex-col justify-center content-center pl-10 pb-12"
                >
                  <p class="text-3xl text-white my-5">
                    {{ batteryList[batteryIndex]?.[fieldA] }}
                  </p>
                  <div class="text-white">
                    {{ batteryList[batteryIndex]?.[fieldB] }}
                  </div>
                </div>
              </div>
              <img
                :src="batteryList[batteryIndex]?.article_cover"
                style="width: 100%; height: 100%"
              />
              <!-- <div class="pattern"></div> -->
            </div>
            <div class="n-right fadeInUp animated">
              <div
                v-for="item in batteryList[batteryIndex]?.list?.slice(0, 3)"
                :key="item"
                @click="productDetail(item.article_id)"
              >
                <img
                  :src="item.article_cover"
                  style="width: 100%; height: 85%"
                />
                <div class="name">{{ item[fieldA] }}</div>
              </div>

              <div
                @click="product()"
                style="background-color: #15397b; color: #ffffff"
              >
                <img
                  :src="batteryList[batteryIndex]?.article_label"
                  style="width: 80px; height: 80px"
                />
                <div class="my-2" style="font-size: 18px; font-weight: bold">
                  {{ batteryList[batteryIndex]?.[fieldA] }}
                </div>
                <div class="flex items-center">
                  <span>more</span>
                  <el-icon :size="20"><DArrowRight /></el-icon>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="location fadeInUp animated">
          <div class="s-left" v-observe-visibility="visibilityChanged">
            <div
              style="
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
              "
            >
              <div>{{ myAbout[fieldA] }}</div>
              <div v-html="myAbout[fieldB]" class="pl-10 pr-20 pt-5"></div>
            </div>
          </div>
          <div class="s-right" style="animation-delay: 0.2">
            <div class="op"></div>
            <img
              :src="myAbout.article_cover"
              style="width: 100%; height: 100%"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="correlation px-32 pb-10">
      <div class="news">
        <div class="n-left mr-5 px-5 pt-6">
          <div class="head" @click="jump()">
            <div>
              <el-icon :size="24" color="#9ad7dc"><Document /></el-icon>
              <!-- <span class="title"> {{ news[0]?.[fieldA] }} </span> -->
              <span class="title"> {{ znEn1[fieldA] }} </span>
            </div>
            <div>{{ znEn[fieldA] }}</div>
          </div>

          <div @click="newsDetail(myGsxw.article_id)">
            <img
              :src="myGsxw.article_cover"
              style="width: 100%; height: 520px"
            />
          </div>

          <div style="height: 100px" @click="newsDetail(myGsxw.article_id)">
            <div class="tab">
              <div>
                <el-button type="success" :round="true">{{
                  znEn4[fieldA]
                }}</el-button>
              </div>
              <span class="title"> {{ myGsxw[fieldA] }} </span>
            </div>
            <div class="text-line-two" v-html="myGsxw[fieldB]"></div>
          </div>
          <!-- <div class="hot">
            <div>
              <div class="box">1</div>
              <div>电动自行车锂</div>
            </div>
            <div></div>
          </div> -->
        </div>
        <div class="n-right">
          <div class="r-top px-5 pt-6">
            <div class="head" @click="jump()">
              <div>
                <el-icon :size="24" color="#9ad7dc"><Document /></el-icon>
                <!-- <span class="title"> {{ news[1]?.[fieldA] }} </span> -->
                <span class="title"> {{ znEn2[fieldA] }} </span>
              </div>
              <div>{{ znEn[fieldA] }}</div>
            </div>
            <div
              class="trade"
              v-for="item in myHyxw"
              :key="item"
              @click="newsDetail(item.article_id)"
            >
              <div style="width: 250px">
                <img
                  :src="item.article_cover"
                  style="width: 100%; height: 100%"
                />
              </div>
              <div>
                <div class="tit">{{ item[fieldA] }}</div>
                <div class="text-line-three" v-html="item[fieldB]"></div>
                <div style="color: #09bf09"></div>
              </div>
            </div>
          </div>
          <div class="r-bottom px-5 pt-6">
            <div class="head" @click="jump()">
              <div>
                <el-icon :size="24" color="#9ad7dc"><Document /></el-icon>
                <!-- <span class="title"> {{ news[2]?.[fieldA] }} </span> -->
                <span class="title"> {{ znEn3[fieldA] }} </span>
              </div>
              <div>{{ znEn[fieldA] }}</div>
            </div>

            <div>
              <div
                class="answer"
                v-for="item in myYnwd"
                :key="item"
                @click="newsDetail(item.article_id)"
              >
                <div class="tit">{{ item[fieldA] }}</div>
                <div class="text-line-two" v-html="item[fieldB]"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref, inject } from "vue";
import shouye from "@/api/index.js";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
import { useIntersectionObserver } from "@vueuse/core";
import { useRouter } from "vue-router";
const router = useRouter();
const allfield = inject("allfield");
const { fieldA, fieldB } = allfield();
const bannerList = ref([]);
const batteryList = ref([]);
const batteryIndex = ref(0);
const myAbout = ref({});
const ryList = ref([]);
const news = ref([]);
const myGsxw = ref({});
const myHyxw = ref([]);
const myYnwd = ref([]);
const znEn = ref({
  nameit: "了解更多",
  ext_field3: "more",
});
const znEn1 = ref({
  nameit: "公司新闻",
  ext_field3: "NEWS",
});
const znEn2 = ref({
  nameit: "行业新闻",
  ext_field3: "NEWS",
});
const znEn3 = ref({
  nameit: "疑难问答",
  ext_field3: "NEWS",
});
const znEn4 = ref({
  nameit: "头条",
  ext_field3: "Headlines",
});

const index = async () => {
  const res = await shouye.index();
  const { banner, dc4, about, ry, dh, gsxw, hyxw, ynwd } = res;
  bannerList.value = banner;
  batteryList.value = dc4;
  myAbout.value = about;
  ryList.value = ry.article_share.split(",");
  news.value = dh.slice(5);
  myGsxw.value = gsxw[0];
  myHyxw.value = hyxw;
  myYnwd.value = ynwd;
  console.log(myYnwd.value);
};
const changeIndex = (index) => {
  batteryIndex.value = index;
};
const jump = () => {
  router.push(`/news`);
};
const newsDetail = (id) => {
  router.push(`/news`);
};
const productDetail = (id) => {
  let rid = batteryList.value[batteryIndex.value].article_id;
  router.push(`/product/details?aid=${id}&id=${rid}`);
};
const product = () => {
  let rid = batteryList.value[batteryIndex.value].article_id;
  router.push(`/product?id=${rid}`);
};

onMounted(() => {
  index();
});

const visibilityChanged = (isV, entry) => {
  // console.log(isV,entry)
};
</script>
<style scoped lang="scss">
.index {
  width: 100%;
  .content {
    background-color: #eeeeee;
    .nav {
      display: flex;
      height: 150px;
      margin-bottom: 10px;
      background-color: #e41d38;
      & > div {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        & > div:first-child {
          width: 40px;
          height: 40px;
          margin-bottom: 5px;
        }
        & > div:last-child {
          font-size: 18px;
          font-weight: bold;
        }
      }
    }
    .goods {
      display: flex;
      height: 600px;
      .n-left {
        flex: 1;
        position: relative;
        .n-left-mask {
          position: absolute;
          top: 0;
          width: 100%;
          height: 600px;
          -webkit-clip-path: polygon(0 0, 37% 0, 50% 100%, 0% 100%);
          clip-path: polygon(0 0, 37% 0, 50% 100%, 0% 100%);
          background: rgba($color: #15397b, $alpha: 0.75);
        }
        .pattern {
          position: absolute;
          top: 0;
          width: 100%;
          height: 600px;
          background-color: #15397b;
          clip-path: polygon(0 0, 35% 0, 50% 100%, 0 100%);
        }
      }
      .n-right {
        width: 660px;
        display: flex;
        flex-wrap: wrap;
        & > div {
          width: 48%;
          height: 49%;
          background-color: #ffffff;
          margin-left: 2%;
          .name {
            text-align: center;
            height: 15%;
            box-sizing: border-box;
            padding-top: 2.5%;
          }
          .name:hover {
            background-color: green;
          }
        }
        & > div:first-child {
          margin-bottom: 2%;
        }
        & > div:last-child {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }

        & > div:last-child:hover {
          background-color: green;
        }
      }
    }
    .location {
      height: 450px;
      position: relative;
      display: flex;
      .s-left {
        background-color: #ffffff;
        width: 48%;
        clip-path: polygon(0 0, 100% 0, 81.8% 100%, 0% 100%);
        & > div > div:first-child {
          font-size: 24px;
          font-weight: bold;
          text-align: center;
          margin-top: 40px;
        }
      }
      .s-right {
        width: 52%;
        clip-path: polygon(16.8% 0, 100% 0, 100% 100%, 0% 100%);
        .op {
          position: absolute;
          background-color: #ffffff;
          width: 18.2%;
          height: 450px;
          clip-path: polygon(0 0, 100% 0, 50% 100%, 0% 100%);
          opacity: 0.4;
        }
      }
    }
  }
  .correlation {
    .show {
      display: flex;
      height: 400px;
    }
    .news {
      display: flex;
      height: 850px;
      margin-top: 45px;
      .title {
        font-size: 22px;
        font-weight: bold;
        margin-left: 5px;
      }
      .text-line-two {
        font-size: 14px;
        display: -webkit-box;
        word-break: break-all;
        -webkit-box-orient: vertical;
        overflow: hidden;
        -webkit-line-clamp: 2;
        color: #888888;
      }
      .text-line-three {
        font-size: 14px;
        display: -webkit-box;
        word-break: break-all;
        -webkit-box-orient: vertical;
        overflow: hidden;
        -webkit-line-clamp: 3;
        color: #888888;
      }
      .head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        & > div:first-child {
          display: flex;
          align-items: center;
        }
        & > div:last-child {
          color: #888888;
        }
      }
      .n-left {
        flex: 1;
        border: 1px solid #ccc;
        & > div {
          margin-bottom: 25px;
        }
        .tab {
          display: flex;
          margin-bottom: 25px;
        }
        .hot {
          font-size: 14px;
          color: #888888;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-top: 1px solid #ccc;
          padding-top: 20px;
          & > div {
            display: flex;
            align-items: center;
          }
          .box {
            width: 20px;
            height: 20px;
            color: #ffffff;
            background-color: #ccc;
            text-align: center;
            line-height: 20px;
            margin-right: 10px;
          }
        }
      }
      .n-right {
        flex: 1;
        display: flex;
        flex-direction: column;
        .tit {
          font-size: 22px;
          font-weight: bold;
        }
        .tit:hover {
          color: #09bf09;
        }
        .r-top {
          height: 490px;
          border: 1px solid #ccc;
          & > div {
            margin-bottom: 25px;
          }
          .trade {
            display: flex;
            height: 175px;
            margin-bottom: 15px;
            & > div:last-child {
              padding: 10px 0;
              flex: 1;
              margin-left: 30px;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
            }
          }
        }
      }
      .r-bottom {
        .tit {
          margin-bottom: 20px;
        }
        flex: 1;
        margin-top: 25px;
        background-color: #f2f2f2;
        & > div {
          margin-bottom: 25px;
        }
        .answer {
          height: 100px;
        }
      }
    }
  }
}
</style>
